<template>
  <div class="grey_bg">
    <navigate>线下预约记录</navigate>
    <search-input
      type="text"
      v-model="value"
      placeholder="搜索预约咨询师"
    ></search-input>
    <div class="main_content">
      <div class="record_list">
        <div
          class="record_item"
          v-for="(r, i) in list"
          :key="i"
          @click="operateClick(r)"
        >
          <div class="record_people bottom_line">
            <img class="user_avatar" :src="joinUrlImg(r.user_avatar)" alt="" />
            <div class="user_detail">
              <div class="detail_row1">
                <div class="user_nickname text_ellipsis">{{ r.nickname }}</div>
                <img
                  class="user_sex"
                  :src="
                    require(`@/assets/images/common/${
                      r.sex == 1 ? 'man' : 'female'
                    }.png`)
                  "
                  alt=""
                />
                <div class="user_age text_justify">{{ r.age }}岁</div>
              </div>
              <div class="detail_row2 text_ellipsis">
                由{{ r.reservation_situation == 1 ? "用户本人" : "他人" }}预约
              </div>
            </div>
            <div
              class="chat_status"
              :class="[
                r.is_end === 0 && r.performance_situation === 0
                  ? 'status_going'
                  : 'status_overing',
              ]"
            >
              <template v-if="r.is_end === 1">已结束</template>
              <template v-if="r.is_end === 0 && r.performance_situation === 0"
                >待赴约</template
              >
              <template v-if="r.is_end === 0 && r.performance_situation === 2"
                >已取消</template
              >
            </div>
          </div>

          <div
            class="record_appointment"
            :class="{
              bottom_line: r.is_end === 0 && r.performance_situation < 2,
            }"
          >
            <div class="appointment_row">
              <div class="appointment_label">预约时段：</div>
              <div
                class="appointment_ctt"
                :class="{
                  no_appointment:
                    r.is_end === 1 ||
                    (r.is_end === 0 && r.performance_situation === 2),
                }"
              >
                <div class="appointment_date">
                  {{ r.appointment_time.split(" ")[0] }}
                </div>
                <div class="appointment_time">
                  {{ r.appointment_time.split(" ")[1] }}
                </div>
              </div>
            </div>
            <div class="appointment_row">
              <div class="appointment_label">问题类型：</div>
              <div class="appointment_ctt">{{ r.question_category_name }}</div>
            </div>
            <div class="appointment_row">
              <div class="appointment_label">提交日期：</div>
              <div class="appointment_ctt">
                {{ formatDate(r.create_time * 1000, "yyyy/MM/dd") }}
              </div>
            </div>
            <div class="appointment_row">
              <div class="appointment_label">预约地点：</div>
              <div class="appointment_ctt">{{ r.adress }}</div>
            </div>
          </div>

          <div
            class="record_operate"
            v-if="r.is_end === 0 && r.performance_situation < 2"
          >
            <div class="operate_item" @click.stop="goTask(r)">
              <div
                class="operate_img"
                :class="{
                  has_task: calcTaskNum(r.task_count, r.task_complete_num),
                }"
              >
                <img src="@/assets/images/function/appoint_task.png" alt="" />
              </div>
              <div class="operate_text">前置任务</div>
            </div>
            <div class="operate_item" @click.stop="cancelAppointment(r)">
              <div class="operate_img">
                <img src="@/assets/images/function/appoint_cancel.png" alt="" />
              </div>
              <div class="operate_text">取消预约</div>
            </div>
            <div class="operate_item" @click.stop="lookDetail(r)">
              <div class="operate_img">
                <img src="@/assets/images/function/appoint_look.png" alt="" />
              </div>
              <div class="operate_text">查看详情</div>
            </div>
          </div>
        </div>
      </div>
      <div class="no_more" v-if="loadingOver">无更多预约记录了</div>
    </div>

    <popup-slot-operate
      :visible.sync="operateVisible"
      :options="options"
      @click="clickItem"
    ></popup-slot-operate>
  </div>
</template>

<script>
import searchInput from "@/components/searchInput/index.vue";
import popupSlotOperate from "@/components/popupSlotOperate/index.vue";
import {
  apiOfflineAppointmentRecord,
  apiDeleteAppointment,
} from "@/api/consult";
import { formatDate } from "@/utils/time";
import { debounce } from "@/utils/debounce";
import { joinUrlImg } from "@/utils/setUrlImg";

export default {
  components: {
    "search-input": searchInput,
    "popup-slot-operate": popupSlotOperate,
  },
  data() {
    return {
      value: "",
      operateVisible: false,
      options: ["查看详情", "取消预约", "删除记录"],
      list: [],
      // 当前点击的行
      currentRow: "",
      _debounceFn: null,
      loadingOver: false,
    };
  },
  watch: {
    value(nV) {
      this._debounceFn();
    },
  },
  computed: {
    calcTaskNum() {
      return (total, done) => {
        if (total == 0 && done == 0) {
          return false;
        }
        if (total > 0 && done < total) {
          return true;
        }
        if (total > 0 && done == total) {
          return false;
        }
      };
    },
  },
  methods: {
    joinUrlImg,
    // 搜索防抖
    _debounce() {
      this._debounceFn = debounce(() => {
        this.getOfflineAppointmentRecod();
      }, 500);
    },
    // 查看详情
    lookDetail(r) {
      this.$router.push(`/appointmentRecordDetail/${r.id}`);
    },
    // 前置任务
    goTask(r) {
      if (r.task_count == 0) {
        return this.$toast.fail("当前无前置任务！");
      }
      this.$router.push(`/appointmentPreTask/${r.id}`);
    },
    async cancelAppointment(r) {
      this.$router.push(`/cancelAppointmentApplication/${r.id}`);
    },
    formatDate,
    // 获取线下预约记录
    async getOfflineAppointmentRecod() {

      const { data } = await apiOfflineAppointmentRecord({
        nickname: this.value,
      });
      this.list = data.data.data;
      this.loadingOver = true;
    },
    operateClick(r) {
      if (r.performance_situation == 2) {
        this.options = ["查看详情", "删除记录"];
      } else {
        this.options = this.$options.data().options;
      }
      this.currentRow = r;
      this.operateVisible = true;
    },
    async clickItem(r) {
      if (r == "取消预约") {
        if (this.currentRow.performance_situation != 0)
          return this.$toast.fail("预约已结束!");
        this.$router.push(
          `/cancelAppointmentApplication/${this.currentRow.id}`
        );
      } else if (r == "删除记录") {
        this.$popup({
          visible: false,
          title: "提示",
          message: "确定要删除此记录吗？",
          confirmOperate: async () => {
            const { data } = await apiDeleteAppointment({
              id: this.currentRow.id,
            });
            if (data.code == 200) {
              this.$toast.success("删除成功！");
              this.getOfflineAppointmentRecod();
            }
          },
        });
      } else {
        this.$router.push(`/appointmentRecordDetail/${this.currentRow.id}`);
      }
      this.operateVisible = false;
    },
  },
  created() {
    this.getOfflineAppointmentRecod();
    this._debounce();
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}
.text_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_justify {
  text-align: justify;
  word-break: keep-all;
}
.bottom_line {
  position: relative;
}
.bottom_line::before {
  display: block;
  width: 100%;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}

.search_input {
  margin: 9.38px auto 7.99px;
}
.main_content {
  height: calc(100% - 101.6562px);
  overflow-y: auto;
}
.record_list {
  display: grid;
  gap: 10.42px;
}
.record_item {
  width: 354.17px;
  background: #ffffff;
  border-radius: 6.94px;
  padding: 0 10.42px;
  box-sizing: border-box;
  margin: 0 auto;
}
.record_people {
  height: 83.33px;
  display: flex;
  gap: 10.42px;
  align-items: center;
  position: relative;
}
.user_avatar {
  width: 55.56px;
  height: 55.56px;
  border-radius: 9.26px;
}
.user_detail {
  width: calc(100% - 65.98px - 56.94px);
  display: grid;
  gap: 13.54px;
  align-content: space-between;
  padding-top: 4.86px;
}
.detail_row1 {
  display: flex;
  line-height: 20.14px;
}
.user_nickname {
  width: fit-content;
  max-width: 70.2px;
  height: 20.14px;
  font-size: 16.67px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  margin-right: 6.6px;
}
.user_sex {
  width: 16.67px;
  height: 20.14px;
  margin-right: 6.25px;
}
.user_age {
  width: 34.38px;
  height: 16.32px;
  font-size: 16.67px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  margin-right: 9.72px;
}
.chat_status {
  width: 56.94px;
  height: 14.24px;
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
}
.status_going {
  color: #00aeff;
}
.status_overing {
  color: #888888;
}
.detail_row2 {
  max-width: 236.11px;
  height: 20.83px;
  line-height: 20.83px;
  font-size: 13.19px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #aaaaaa;
}
.record_appointment {
  padding: 10.42px 0 14.93px 0;
  box-sizing: border-box;
  display: grid;
  gap: 9.02px;
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 25px;
}
.appointment_row {
  display: grid;
  gap: 17.01px;
  grid-template-columns: 62.15px auto;
}
.appointment_label {
  color: #666666;
  text-align: justify;
  word-break: keep-all;
}
.appointment_ctt {
  color: #333333;
  display: flex;
}
.appointment_ctt:has(div) {
  display: flex;
  /* gap: 3.47px; */
  font-size: 13.89px;
  text-align: center;
}
.appointment_ctt div {
  width: 100.69px;
  height: 24.31px;
  border-radius: 12.15px;
  text-align: center;
  margin-right: 3.47px;
}
.appointment_date {
  color: #ffffff;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 10%),
    #29cca6;
}
.appointment_time {
  color: #ffffff;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 10%),
    #ff9500;
}
.no_appointment div {
  background: transparent;
  color: #888888;
  border: 0.35px solid #888888;
  border-radius: 12.5px;
  box-sizing: border-box;
}

.record_operate {
  display: grid;
  height: 48.61px;
  grid-template-columns: repeat(3, 33.33%);
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
}
.operate_item {
  padding: 0 14.93px;
  box-sizing: border-box;
  display: flex;
  gap: 7.29px;
  align-items: center;
}
.operate_item.is_disabled {
  opacity: 0.3;
}
.operate_img {
  width: 15.97px;
  height: 15.97px;
  align-items: center;
  position: relative;
}
.operate_img.has_task::after {
  width: 8.33px;
  height: 8.33px;
  background: #ff6161;
  position: absolute;
  top: -5px;
  right: -5px;
  content: "";
  display: block;
  border-radius: 50%;
}
.operate_img img {
  width: 100%;
  height: 100%;
}
.operate_text {
  width: 57.64px;
  text-align: justify;
  word-break: keep-all;
}

.no_more {
  width: fit-content;
  height: 116.66px;
  line-height: 116.66px;
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #777777;
  position: relative;
  margin: 0 auto;
}
.no_more::before,
.no_more::after {
  width: 34.72px;
  height: 0.35px;
  display: block;
  content: "";
  background: #777777;
  position: absolute;
  top: 58.33px;
}
.no_more::before {
  left: -55.55px;
}
.no_more::after {
  right: -55.55px;
}
</style>